css cards

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

body {
  background-image: url("../images/pattern-background-desktop.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-color: hsl(225, 100%, 94%);
}

main .card {
  width: 450px;
}

main .card .container {
  padding: 4.2rem;
}

main .card .description {
  margin-bottom: 2.5rem;
  line-height: 2.8rem;
}

main .card .plan {
  justify-content: space-around;
}

main .card .plan-info {
  margin-right: 80px;
}

main .card .change-plan:hover {
  cursor: pointer;
  text-decoration: none;
  color: #766cf1;
}

main .card .main-button {
  margin-bottom: 30px;
}

main .card .main-button:hover {
  cursor: pointer;
  background-color: #766cf1;
}

main .card .cancel {
  color: rgb(114, 114, 114);
  font-weight: 700;
}

main .card .cancel:hover {
  cursor: pointer;
  font-weight: 900;
  color: hsl(223, 47%, 23%);
}

// Hello Friends, I have listed over 30+ best card designs made with HTML, CSS, and JS. Check out these excellent CSS card design examples which are available on Codepen.

<div class="container">
    <div class="cards grid-row">
      <div class="card">
        <div class="card-top">
          <img src="img1.jpg" alt="Blog Name">
        </div>
        <div class="card-info">
          <h2>JavaScript Quote Generator</h2>
          <span class="date">Monday, Jan 20, 2021</span>
          <p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="card-bottom flex-row">
          <a href="#" class="read-more">Read Full Blog</a>
          <a href="#" class="button btn-yellow">Blog</a>
        </div>
      </div>
      <div class="card">
        <div class="card-top">
          <img src="img2.jpg" alt="Blog Name">
        </div>
        <div class="card-info">
          <h2>How to Build HTML Minifier</h2>
          <span class="date">Monday, Jan 20, 2021</span>
          <p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="card-bottom flex-row">
          <a href="#" class="read-more">Read Full Blog</a>
          <a href="#" class="button btn-sky">Blog</a>
        </div>
      </div>
      <div class="card">
        <div class="card-top">
          <img src="img3.jpg" alt="Blog Name">
        </div>
        <div class="card-info">
          <h2>How to Build Signature Pad</h2>
          <span class="date">Monday, Jan 20, 2021</span>
          <p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="card-bottom flex-row">
          <a href="#" class="read-more">Read Full Blog</a>
          <a href="#" class="button btn-dpink">Blog</a>
        </div>
      </div>
      <div class="card">
        <div class="card-top">
          <img src="img4.jpeg" alt="Blog Name">
        </div>
        <div class="card-info">
          <h2>How to Build Gsap Gallery</h2>
          <span class="date">Monday, Jan 20, 2021</span>
          <p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="card-bottom flex-row">
          <a href="#" class="read-more">Read Full Blog</a>
          <a href="#" class="button btn-dpink">Blog</a>
        </div>
      </div>
    </div>    
  </div>
  
  
  
  //CSS
  
  
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  background: #e8eff7;
}
.grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  margin: 20px 0;
}
.card-top img {
  display: block;
  width: 100%;
}
.container {
  width: 95%;
  margin: auto;
}
.card {
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
}
.card-top {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
}
.card-info h2 {
  font-size: 18px;
  margin: 10px 0 5px 0;
}
.date {
  margin-bottom: 10px;
}
span,p {
  font-size: 15px;
  display: block;
}
.excerpt {
  color: #aeaeae;
}
.flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-bottom {
  margin-top: 20px;
}
.button {
  text-decoration: unset;
  font-weight: 600;
  text-transform: uppercase;
  color: #4e4e4e;
  width: 80px;
  text-align: center;
  font-size: 15px;
  line-height: 30px;
  border-radius: 5px;
  background: #f2f4f6;
}
.read-more {
  text-decoration: unset;
  color: #000;
  font-weight: 600;
}
.btn-yellow {
  background: #ffb91d;
}
.btn-sky {
  background: #d2f9fe;
}
.btn-dpink {
  background: #e8d3fc;
}